<template>
	<scroll-view @scrolltolower="getJobList" scroll-y style="height: 100vh;" @scroll="onPageScroll"
		class="flex-col page">
		<MyHeader titleColor="#fff" :paddingBottom="90" title="兼职"
			background="url(https://img.js.design/assets/img/676a07f3b48f195f6aadd0f3.jpg#67b41d1d13b63dff727626e5b16d5297)">
		</MyHeader>
		<view :class="{fadeOutUp:!showFixNav && isScroll,fadeInDown:showFixNav}" class="fixHeader animated">
			<MyHeader background="linear-gradient(to bottom, #00aaff, #ffffff)" :paddingBottom="0" title="兼职"
				titleColor="#fff" />
		</view>
		<view class="flex-col relative section_4">
			<view class="flex-col justify-start section_5">
				<view class="flex-row">
					<!-- 状态选择器 -->
					<up-picker keyName="name" @close="stateShow = false" ref="statePickerRef" :showToolbar="false"
						:closeOnClickOverlay="true" @cancel="stateShow = false" :show.sync="stateShow"
						@confirm="onstateComfirm" :columns="stateColumns">
						<template #toolbar-bottom>
							<u-button @click="confirmPicker" type="primary">确定</u-button>
						</template>
					</up-picker>
					<view @click="stateShow = true"
						class="flex-row justify-center items-center group_3 equal-division-item">
						<text class="font_2 text_3 mr-10">{{screenParams.state}}状态</text>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
					<!-- 日历组件 -->
					<up-calendar @confirm="onTimeConfirm" @close="calendarShow = false" :monthNum="24"
						:minDate="minDate" :maxDate="maxDate" :show="calendarShow"></up-calendar>
					<view @click="calendarShow = true" class="flex-row items-center group_3 equal-division-item ml-23">
						<text class="font_2 text_3 mr-10">{{screenParams.time}}</text>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-col list">
				<view class="flex-col mt-4 section_6 list-item" v-for="(item, index) in items" :key="index">
					<view class="userBox">
						<view class="leftAvatar">
							<view class="userImg">
								<image class="shrink-0 image_8" :src="item.userImage" />
							</view>
							<view class="rightusername">
								<view class="username">
									{{item.userName}}
								</view>
								<view class="createTime">
									{{item.createTime}}
								</view>
							</view>
						</view>
						<view class="rightStatus">
							{{item.statusName}}
						</view>
					</view>

					<view class="flex-col self-stretch group_5">
						<text class="self-start font_2 text_7">{{item.title}}</text>
						<text class="self-stretch font_5 text_8">
							{{item.remark}}
						</text>
					</view>
					<view class="flex-row equal-division">
						<image v-for="item2 in item.imageUrlList" :key="item2" class="image_9 equal-division-item_2"
							:src="item2" />
					</view>
					<view class="self-stretch divider" v-show='item.userId!=userStore.userInfo.id'></view>
					<view class="flex-row equal-division_2 group_6" style="text-align: center;justify-content: center;"
						v-show='item.userId!=userStore.userInfo.id'>
						<!-- <view class="flex-row items-center">
							<image class="shrink-0 image_10"
								src="https://ide.code.fun/api/image?token=676b7c9f4ae84d001221a2d0&name=a0694babfa7a4854e33a73339719e04d.png" />
							<text class="ml-12 font_6">收藏</text>
						</view> -->
						<view class="flex-row items-center" @click="goConnect(item)">
							<image class="shrink-0 image_10"
								src="https://ide.code.fun/api/image?token=676b7c9f4ae84d001221a2d0&name=d0fbd853fbcc03456f1131c4b0bf9e60.png" />
							<text class="ml-12 font_6">联系我</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 发布信息按钮 -->
		<addNewInfo go="/otherpages/job/jobPublish/jobPublish" />

		<!-- 底部自定义tabbar -->
		<myTabbar></myTabbar>
	</scroll-view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed
	} from 'vue';
	import {
		useScollShowNav,
		useCalendarAndState
	} from '@/composables';
	import dayjs from 'dayjs';
	import {
		isLoginAndGo
	} from '@/utils';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getjobListAPI
	} from '@/apis/partTime.js'
	import {
		useUserStore
	} from '@/store/useUserStore.js'

	const userStore = useUserStore()
	const items = ref([])
	// 类似 vue2 中的 mixin ：开启下拉显示导航
	const {
		showFixNav,
		onPageScroll,
		isScroll
	} = useScollShowNav()
	// 全部状态 和 日历组件使用
	const {
		calendarShow,
		screenParams,
		stateShow,
	} = useCalendarAndState()

	// 计算1年前的日期
	const minDate = computed(() => {
		const year = new Date().getFullYear() - 1;
		const month = new Date().getMonth();
		const day = new Date().getDate();
		return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
	});
	// 计算1年后的日期
	const maxDate = computed(() => {
		const year = new Date().getFullYear() + 1;
		const month = new Date().getMonth();
		const day = new Date().getDate();
		return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
	});
	const dateChooseFlag = ref(false)
	const onTimeConfirm = (e) => {
		console.log(e[0]);
		items.value = []
		stateShow.value = false
		pageParams.page = 1
		dateChooseFlag.value = true
		screenParams.time = e[0]
		getJobList()
		calendarShow.value = false
	}

	const stateColumns = reactive([
		[{
				name: '全部',
				value: -1
			}, {
				name: '上架',
				value: 1
			},
			{
				name: '下架',
				value: 0
			},
			{
				name: '已出',
				value: 3
			},
			{
				name: '未出',
				value: 4
			},
		]
	])
	const pageParams = reactive({
		page: 1,
		pageSize: 10
	})

	const getJobList = async () => {
		const res = await getjobListAPI({
			page: pageParams.page,
			pageSize: 10,
			status: status.value,
			createTime: dateChooseFlag.value ? screenParams.time : ''
		})
		const maxPage = Math.ceil(res.data.total / 10); // 计算最大页数，假设每页10条记录
		if (res.code == 200) {
			if (pageParams.page < maxPage || (pageParams.page === maxPage && res.data.records.length > 0)) {
				pageParams.page++
				items.value = [...items.value, ...res.data.records.map(item => ({
					...item,
					statusName: stateColumns[0].find(col => col.value == item.status)?.name ||
						'未知状态'
				}))]
			}
		}
	}

	onShow(async () => {
		await isLoginAndGo('/otherpages/schoolWall/index/index')
		pageParams.page = 1
		items.value = []
		getJobList()
	})
	const statePickerRef = ref(null);
	const confirmPicker = () => {
		statePickerRef.value.confirm();
	}
	const status = ref('')
	const onstateComfirm = (e) => {
		screenParams.state = e.value[0].name
		status.value = e.value[0].value == -1 ? "" : e.value[0].value
		items.value = []
		stateShow.value = false
		pageParams.page = 1
		getJobList()
	}

	const goConnect = (item) => {
		console.log(item);
		uni.navigateTo({
			url: '/otherpages/job/connect?targetUserId=' + item.userId +
				'&module=' + '3' + '&receiveImg=' + item.userImage + '&userName=' + item.userName
		})
	}
</script>
<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-23 {
		margin-left: 46rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.ml-101 {
		margin-left: 202rpx;
	}

	.mr-10 {
		margin-right: 20rpx;
	}

	.page {
		background-color: #f7f8fa;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 36rpx 12rpx 336rpx 34rpx;
		background-image: url('https://ide.code.fun/api/image?token=676b7c9f4ae84d001221a2d0&name=e7893b2e412f231b61554c284b439dac.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group {
		padding-left: 36rpx;
		padding-right: 16rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.78rpx;
		color: #333333;
	}

	.text {
		font-size: 30rpx;
		line-height: 22.76rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.group_2 {
		padding: 20rpx 0 12rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_2 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 33.52rpx;
		opacity: 0.9;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		margin-top: 0rpx;
		background-color: #f7f8fa;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.section_5 {
		padding: 36rpx 0;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.group_3 {
		flex: 1 1 351.92rpx;
	}

	.equal-division-item {
		padding: 12rpx 32rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 25.78rpx;
		color: #333333;
	}

	.text_3 {
		line-height: 24.28rpx;
	}

	.image_7 {
		width: 16rpx;
		height: 16rpx;
	}

	.list {
		padding-top: 16rpx;
	}

	.section_6 {
		padding: 28rpx 32rpx 24rpx;
		background-color: #ffffff;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_4 {
		margin-right: 16rpx;
	}

	.image_8 {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
	}

	.text_5 {
		line-height: 25.84rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.06rpx;
		color: #365d99;
	}

	.text_6 {
		line-height: 22rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 56rpx;
		color: #cccccc;
	}

	.text_4 {
		width: 186rpx;
	}

	.group_5 {
		margin-right: 16rpx;
		margin-top: 12rpx;
	}

	.text_7 {
		line-height: 56rpx;
		width: 256rpx;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 40rpx;
		color: #4d4d4d;
	}

	.text_8 {
		margin-top: -8rpx;
	}

	.equal-division {
		align-self: stretch;
	}

	.image_9 {
		flex: 1 1 220rpx;
	}

	.equal-division-item_2 {
		height: 220rpx;
	}

	.divider {
		margin-top: 20rpx;
		background-color: #e5e5e5;
		height: 1rpx;
	}

	.equal-division_2 {
		align-self: center;
		margin-top: 20rpx;
	}

	.group_6 {
		width: 536.56rpx;
	}

	.image_10 {
		width: 42.6rpx;
		height: 42rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.78rpx;
		color: #333333e6;
	}

	.section_8 {
		padding: 6rpx 0;
		filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
		background-color: #ffffff;
	}

	.equal-division-item_3 {
		width: 48rpx;
		height: 48rpx;
	}

	.group_10 {
		margin: 4rpx 0 -44rpx;
		padding: 0 112rpx;
	}

	.image_12 {
		width: 44rpx;
		height: 42rpx;
	}

	.image_13 {
		margin-right: 100rpx;
		width: 42rpx;
		height: 42rpx;
	}


	.userBox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.leftAvatar {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.rightusername {
				margin-left: 10px;

				.username {
					color: rgba(76, 142, 239, 1);
					font-size: 14px;
					font-weight: 400;
				}

				.createTime {
					color: rgba(204, 204, 204, 1);
					font-size: 10px;
					font-weight: 400;
				}
			}
		}

		.rightStatus {
			color: rgba(54, 93, 153, 1);
		}

	}
</style>